<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>4. Multiple Controller</title>
        <script src="../../angular.js" charset="utf-8"></script>
        <script src="script.js"></script>
    </head>
    <body ng-app="mainApp">
        <div ng-controller="firstController">
            <strong>First Name: </strong> {{ firstName }} <br>
            <strong>Last Name: </strong> <span ng-bind="lastName"></span><br>
            <strong>Full Name: </strong> {{ getFullName() }} <br>
            <br>
            <label>Set the first name: <input type="text" ng-model="firstName"></label>
            <label>Set the last name: <input type="text" ng-model="lastName"></label>
        </div>
        <div ng-controller="secondController">
            <h2>Model managed by the second controller</h2>
            <strong>First name: </strong> {{ firstName }} <br>
            <strong>Middle name: </strong> {{ middleName }} <br>
            <strong>Last name: </strong> <span ng-bind="lastName"></span> <br>
            <strong>Full name: </strong> {{ getFullName() }} <br>
            <br>
            <label>Set the first name: <input type="text" ng-model="firstName"></label>
            <label>Set the middle name: <input type="text" ng-model="middleName"></label>
            <label>Set the last name: <input type="text" ng-model="lastName"></label>
        </div>
    </body>
</html>
